<template>
  <j-modal title="变更单详情" :width="1350" :visible.sync="modalVisible" :maskClosable="false" switchFullscreen>
    <a-spin :spinning="submitLoading">
      <a-divider orientation="left"> 基本信息 </a-divider>
      <a-descriptions :column="3">
        <a-descriptions-item label="采购人"> {{ formData.purchaser }} </a-descriptions-item>
        <a-descriptions-item label="成本中心"> {{ formData.costCenterId_dictText }} </a-descriptions-item>
        <a-descriptions-item label="采购方式"> {{ formData.purchaseWay_dictText }} </a-descriptions-item>
        <a-descriptions-item label="收货仓库"> {{ formData.warehouse_dictText }} </a-descriptions-item>
        <a-descriptions-item label="运输方式"> {{ formData.transportWay_dictText }} </a-descriptions-item>
        <a-descriptions-item label="预计到货时间"> {{ formData.expectArrivalTime }} </a-descriptions-item>
        <a-descriptions-item label="给仓库留言" :span="3"> {{ formData.warehouseRemark }} </a-descriptions-item>
        <a-descriptions-item label="备注" :span="3"> {{ formData.remark }} </a-descriptions-item>
        <a-descriptions-item label="变更原因" :span="3"> {{ formData.changeCause }} </a-descriptions-item>
      </a-descriptions>
      <a-divider orientation="left"> 产品信息 </a-divider>
      <a-table
        bordered
        :pagination="false"
        :scroll="{ x: true, y: 400 }"
        :columns="formColumns"
        :data-source="formData.productDetailChangeList"
        rowKey="skuCode"
      >
        <template #imgSlot="text, record">
          <a-popover trigger="hover" placement="right">
            <template #content>
              <div class="popover-preview-box">
                <img :src="record.imgUrl" />
              </div>
            </template>
            <viewer :images="[record.imgUrl]" class="img-box">
              <img v-show="record.imgUrl" class="sku-img" :src="record.imgUrl" />
            </viewer>
          </a-popover>
        </template>
        <template #detailSlot="text, record">
          <div>类目:{{ record.categoryName }}</div>
          <div>名称:{{ record.nameCn }}</div>
          <div>颜色/尺寸:{{ record.color }};{{ record.size }}</div>
          <div>单品规格(cm):{{ record.singleSpec }}</div>
          <div>毛重(KG):{{ record.gw }}</div>
          <div>
            质检方式:<span v-if="record.qualityType == 1">免检</span><span v-if="record.qualityType == 3">全检</span
            ><span v-if="record.qualityType == 2">抽检</span>
          </div>
        </template>
        <template #supplierSlot="text, record">
          <template v-if="record.supplierId">
            <div>供应商:{{ record.supplierName }}</div>
            <div class="link-item">
              <div>采购链接:</div>
              <a-tooltip :overlayStyle="{ 'min-Width': '700px' }">
                <template slot="title"> {{ record.url || '-' }} </template>
                <div class="link">
                  {{ record.url || '-' }}
                </div>
              </a-tooltip>
            </div>
            <div>
              属性:
              <div v-if="record.supplierType == 1">
                <div v-for="item1 in record.attribute" :key="item1.attributeID">
                  {{ item1.attributeName }}:
                  <span v-for="(val2, index2) in item1.checkVal" :key="index2">{{ val2 }}；</span>
                </div>
              </div>
              <div v-else>{{ record.attribute || '-' }}</div>
            </div>
            <div>最低起订量:{{ record.lowCount }}</div>
          </template>
          <template v-else>
            <div class="c-red">未找到供应商</div>
          </template>
        </template>
        <template #specSlot="text, record">
          <div>
            供应商规格:
            <span v-if="record.supplierId" :class="{ 'c-red': record.specsSup > 1 }">{{ record.specsSup }}</span
            ><span v-else>-</span>/组
          </div>
          <div>
            入库规格:<span v-if="record.supplierId" :class="{ 'c-red': record.specsMy > 1 }">{{ record.specsMy }}</span
            ><span v-else>-</span>/组
          </div>
          <a-tooltip placement="top">
            <template slot="title">
              供应商规格{{ record.specsSup }}：代表向供应商下单1个含{{ record.specsSup }}件；入库规格{{
                record.specsMy
              }}：代表仓库按照{{ record.specsMy }}个 1 组入库。
            </template>
            <a-icon type="info-circle" />
          </a-tooltip>
        </template>
        <template #numTitle>
          <span class="c-red">新</span>采购数量
          <div>(含已收货)</div></template
        >
        <template #unitPriceNew> <span class="c-red">*新</span>采购单价(元) </template>
        <template #totalPriceNew> <span class="c-red">*新</span>采购总价(元) </template>
      </a-table>
      <a-row style="margin-top: 15px">
        <a-col :span="6"> 运费：{{ formData.shippingFeeOld }} </a-col>
        <a-col :span="18">
          跟踪号：
          <div>
            <span v-for="(item, index) in formData.trackingNumberArr" :key="index">
              {{ item }} <a-button type="link" icon="copy" @click="copyTo(item)"></a-button>
            </span>
          </div>
        </a-col>
        <a-col :span="6"> 新运费：{{ formData.shippingFeeNew }} </a-col>
      </a-row>
      <a-divider orientation="left"> 支付信息 </a-divider>
      <div class="pay-msg">
        单据费用：采购总量 = <span class="c-red">{{ formData.purchaseTotalNew }}</span
        ><span class="old-size">({{ formData.purchaseTotalOld }})</span>，采购总金额 =
        <span class="c-red"
          >{{ formData.totalAmountNew }}<span class="old-size">({{ formData.totalAmountOld }})</span></span
        >
        <span>元</span>
      </div>
      <a-descriptions :column="3">
        <a-descriptions-item label="结算类型"> {{ formData.settlementType_dictText }} </a-descriptions-item>
        <a-descriptions-item label="结算方式"> {{ formData.settlementWay_dictText }} </a-descriptions-item>
        <a-descriptions-item label="支付方式"> {{ formData.settlementWay_dictText }} </a-descriptions-item>
        <a-descriptions-item label="供应商订单"> {{ formData.supplierOrderNoOld }} </a-descriptions-item>
        <a-descriptions-item label="支付单号"> {{ formData.paymentOrderNoOld }} </a-descriptions-item>
        <a-descriptions-item label="付款时间"> {{ formData.paymentTimeOld }} </a-descriptions-item>
        <a-descriptions-item label="支付凭证" :span="3">
          <j-upload-oss v-model="formData.paymentVoucherOld" fileType="file" :disabled="true" />
        </a-descriptions-item>
        <a-descriptions-item label="新供应商订单"> {{ formData.supplierOrderNoNew }} </a-descriptions-item>
        <a-descriptions-item label="新支付单号"> {{ formData.paymentOrderNoNew }} </a-descriptions-item>
        <a-descriptions-item label="新付款时间"> {{ formData.paymentTime }} </a-descriptions-item>
        <a-descriptions-item label="新支付凭证" :span="3">
          <j-upload-oss v-model="formData.paymentVoucherNew" fileType="file" :disabled="true" />
        </a-descriptions-item>
      </a-descriptions>
    </a-spin>
    <template #footer>
      <a-button @click="modalVisible = false"> 关闭 </a-button>
    </template>
  </j-modal>
</template>

<script>
import copyToClipboard from 'copy-to-clipboard'
import { putFormAction } from '@/api/manage'

export default {
  data() {
    return {
      modalVisible: false,
      submitLoading: false,
      showProductCheck: false,
      formData: {
        productDetailChangeList: [],
      }, // 表单数据
      url: {
        queryById: `/hzkj-purchase/purchase/change/order/detail`,
      },
      formColumns: [
        {
          title: '序号',
          key: 'rowIndex',
          width: 60,
          align: 'center',
          customRender(t, r, index) {
            return parseInt(index) + 1
          },
        },
        {
          title: 'SKU',
          width: 110,
          align: 'center',
          dataIndex: 'skuCode',
        },
        {
          title: '主图',
          width: 110,
          align: 'center',
          scopedSlots: { customRender: 'imgSlot' },
        },
        {
          title: '产品信息',
          width: 200,
          scopedSlots: { customRender: 'detailSlot' },
        },
        {
          title: '供应商',
          width: 300,
          scopedSlots: { customRender: 'supplierSlot' },
        },
        {
          title: '采购入库关系',
          width: 150,
          scopedSlots: { customRender: 'specSlot' },
        },
        {
          title: '原采购数量',
          width: 150,
          dataIndex: 'purchaseQuantityOld',
        },
        {
          title: '采购在途',
          width: 150,
          dataIndex: 'transitQuantity',
        },
        {
          slots: { title: 'numTitle' },
          width: 130,
          align: 'center',
          dataIndex: 'purchaseQuantityNew',
        },
        {
          title: '采购单价(元)',
          width: 120,
          align: 'center',
          dataIndex: 'unitPriceOld',
        },
        {
          title: '采购总价(元)',
          width: 120,
          align: 'center',
          dataIndex: 'totalPriceOld',
        },
        {
          width: 120,
          align: 'center',
          slots: { title: 'unitPriceNew' },
          dataIndex: 'unitPriceNew',
        },
        {
          width: 120,
          align: 'center',
          slots: { title: 'totalPriceNew' },
          dataIndex: 'totalPriceNew',
        },
      ],
    }
  },
  methods: {
    api_open(id) {
      this.modalVisible = true
      this.submitLoading = true
      putFormAction(this.url.queryById, { id }).then((res) => {
        if (res.success) {
          this.formData = {
            ...res.result,
            trackingNumberArr: res.result.trackingNumberOld ? res.result.trackingNumberOld.split(',') : [],
            productDetailChangeList: res.result.productDetailChangeList.map((i) => ({
              ...i,
              attribute: i.supplierType == '1' ? JSON.parse(i.attribute) : i.attribute,
            })),
          }
          this.submitLoading = false
        } else {
          this.$message.warning(res.message)
        }
      })
    },
    // 复制到剪贴板
    copyTo(value) {
      try {
        copyToClipboard(value)
        this.$message.success(`已复制：${value}`)
      } catch (e) {
        this.$message.error('复制失败')
      }
    },
  },
}
</script>

<style lang="less" scoped>
.popover-preview-box {
  width: 300px;
  height: 300px;
  position: relative;
  background-color: #fafafa;
  img {
    max-height: 100%;
    max-width: 100%;
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
  }
}
.img-box {
  width: 60px;
  height: 60px;
  margin-right: 10px;
  display: inline-block;
  cursor: pointer;
  position: relative;
  background-color: #fafafa;
  img {
    width: 100%;
    height: 100%;
  }
}
.c-red {
  color: #ff4d4f;
}

.pay-msg {
  font-weight: bold;
  font-size: 15px;
  padding: 5px 5px 15px;
}
.link-item {
  display: flex;
  .link {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 200px;
  }
}
.old-size {
  color: grey;
  text-decoration: line-through;
}
</style>
